<!--  -->
<template>
  <div class="approval">
    <div class="approval__content approval__box">
      <div class="approval__content__header">审批流程管理</div>
      <div class="approval__content__flex">
        <div class="approval__content__side">
          <el-input
            class="approval__content__side__input"
            v-model="form.groupInput"
            @input="querySearch"
            placeholder="请输入分类名称"
            clearable
          >
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-tree
            ref="tree"
            :data="data"
            :default-expanded-keys="['groupParentId1', 'groupParentId2']"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
            node-key="id"
            :props="{
              children: 'children',
              label: 'label'
            }"
          ></el-tree>
        </div>
        <div class="approval__content__block">
          <el-form :inline="true" class="approval__content__flex approval__content__border">
            <div>
              <el-form-item label="流程名称：">
                <el-input v-model="form.processName" clearable placeholder="请输入"></el-input>
              </el-form-item>

              <el-form-item label="状态：">
                <el-select v-model="form.status" placeholder="请选择" clearable>
                  <el-option label="启用" :value="2"></el-option>
                  <el-option label="禁用" :value="1"></el-option>
                  <el-option label="草稿" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
              </el-form-item>
            </div>
          </el-form>
          <div class="approval__content__control">
            <el-button v-if="this.form.groupId" type="primary" @click="newProcess"
              >新增流程</el-button
            >
          </div>
          <div class="approval__content__list">
            <el-empty v-if="!records.length" :image-size="200"></el-empty>
            <el-card v-for="(item, index) in records" :key="index">
              <div class="approval__content__card__image">
                <img :src="item.fileImage" alt="" />
                <div class="approval__content__card__tags">
                  <div v-if="item.status === 0">草稿</div>
                  <div v-if="item.status === 1">禁用</div>
                  <div v-if="item.status === 2">启用</div>
                  <div v-if="item.isDefault === 1">默认</div>
                </div>
              </div>
              <div
                class="approval__content__card__title approval__content__flex approval__content__items-center"
              >
                <h3>{{ item.formName }}</h3>
                <div>
                  <div>v{{ item.version }}</div>
                  <div>{{ item.updated }}</div>
                </div>
              </div>
              <div class="approval__content__card__control">
                <el-button
                  v-if="[0, 1, 2].includes(item.status)"
                  type="text"
                  @click="goPreview(item)"
                >
                  查看
                </el-button>
                <el-button v-if="[0, 1].includes(item.status)" type="text" @click="goEdit(item)">
                  编辑
                </el-button>
                <el-popconfirm
                  v-if="[0, 1].includes(item.status)"
                  title="确定删除此流程吗？"
                  @confirm="onDelete(item)"
                >
                  <el-button type="text" slot="reference">删除</el-button>
                </el-popconfirm>
                <el-popconfirm
                  v-if="[0].includes(item.status)"
                  title="确定发布此流程吗？"
                  @confirm="onPublish(item)"
                >
                  <el-button type="text" slot="reference">发布{{ status }}</el-button>
                </el-popconfirm>
                <el-popconfirm
                  v-if="[2].includes(item.status)"
                  title="确定禁用此流程吗？"
                  @confirm="onDisable(item)"
                >
                  <el-button type="text" slot="reference">禁用</el-button>
                </el-popconfirm>
                <el-popconfirm
                  v-if="[1].includes(item.status)"
                  title="确定发布此流程吗？"
                  @confirm="onEnable(item)"
                >
                  <el-button type="text" slot="reference">发布</el-button>
                </el-popconfirm>
                <el-popconfirm
                  v-if="[1, 2].includes(item.status)"
                  title="确定复制此流程吗？"
                  @confirm="onCopy(item)"
                >
                  <el-button type="text" slot="reference">复制</el-button>
                </el-popconfirm>
                <el-button
                  v-if="[0].includes(item.isDefault)"
                  type="text"
                  @click="setDefault(item)"
                >
                  设为默认
                </el-button>
                <!-- <el-dropdown @command="dropdownCommand">
                  <el-button type="text">更多</el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="查看">查看</el-dropdown-item>
                    <el-dropdown-item command="复制">复制</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown> -->
              </div>
            </el-card>
          </div>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.pageNo"
            :page-sizes="[3, 6, 9]"
            :page-size="form.pageSize"
            layout="prev, pager, next, sizes, jumper"
            :total="form.pageTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryProcessByOrg,
  updateDefault,
  deleteProcess,
  disableProcess,
  enableProcess,
  deployProcess,
  copyProcess
} from '@/api/approval.js'
// import { findSealTypeList } from '@/api/signatureManage.js'
import { getToken } from '@/utils/auth'
import { EEC_BASE_API } from '@/utils/EEC.js'
export default {
  name: 'Approval',
  computed: {
    selectedNode() {
      return this.$store.state.select.selectedNode
    }
  },
  data() {
    return {
      data: [],
      records: [],
      userLoginDto: {},
      form: {
        groupName: '',
        groupId: '',
        groupParentName: '',
        groupParentId: '',
        groupInput: '',
        processName: '',
        status: null,
        pageNo: 1,
        pageSize: 6,
        pageTotal: 0
      }
    }
  },
  methods: {
    reset() {
      this.form = {
        groupName: '',
        groupId: '',
        groupParentName: '',
        groupParentId: '',
        groupInput: '',
        processName: '',
        status: null,
        pageNo: 1,
        pageSize: 6,
        pageTotal: 0
      }
      this.querySearch('')
      this.queryProcess()
    },

    querySearch(value) {
      this.$refs.tree.filter(value)
    },

    filterNode(value, data) {
      if (!value) return true
      return data.label.includes(value)
    },
    newProcess() {
      const { groupId, groupName, groupParentId, groupParentName } = this.form
      this.$router.push({
        path: '/approval/form',
        query: {
          groupId,
          groupName,
          groupParentId,
          groupParentName
        }
      })
    },
    handleNodeClick(params) {
      if (typeof params.id === 'string' && params.id.includes('groupParentId')) {
        this.form.groupParentId = params.id.replace('groupParentId', '')
        this.form.groupParentName = params.name
        this.form.groupName = ''
        this.form.groupId = ''
      } else if (typeof params.id === 'string' && params.id.includes('groupId')) {
        this.form.groupParentId = params.parentId.replace('groupParentId', '')
        this.form.groupParentName = params.parentName
        this.form.groupName = params.label
        this.form.groupId = params.id.replace('groupId', '')
      }
      this.form.pageNo = 1;
      this.queryProcess()
    },
    async dropdownCommand(value) {
      if (value === '复制') {
        await this.$confirm('确定复制此流程吗？', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
      }
    },
    async queryProcess() {
      try {
        const { data } = await queryProcessByOrg({
          data: {
            orgId: this.userLoginDto.orgId,
            groupParentId: this.form.groupParentId,
            groupId: this.form.groupId,
            status: this.form.status,
            pageSize: this.form.pageSize,
            pageNo: this.form.pageNo,
            processName: this.form.processName
          },
          headers: {
            // Cookie: 'wflowToken-' + this.userLoginDto.token
          }
        })
        this.records = data.records.map((element) => ({
          ...element,
          fileImage: element.filePath
        }))
        this.form.pageTotal = data.total
      } catch (error) {
        console.log(error)
      }
    },
    async onDisable({ formId }) {
      await disableProcess({
        data: {
          formId
        },
        headers: {}
      })
      this.$message.success('禁用成功')
      this.queryProcess()
    },
    async onEnable({ formId }) {
      await enableProcess({
        data: {
          formId
        },
        headers: {}
      })
      this.$message.success('发布成功')
      this.queryProcess()
    },
    async onCopy({ formId }) {
      await copyProcess({
        data: {
          formId
        },
        headers: {}
      })
      this.$message.success('复制成功')
      this.queryProcess()
    },
    async onPublish({ formId }) {
      await deployProcess({
        data: {
          formId
        },
        headers: {}
      })
      this.$message.success('发布成功')
      this.queryProcess()
    },
    async onDelete({ formId }) {
      await deleteProcess({
        data: {
          formId
        },
        headers: {}
      })
      this.$message.success('删除成功')
      this.queryProcess()
    },
    async goEdit({ formId, groupId, groupParentId,groupName,groupParentName }) {
      // const groups = this.data.flatMap((element) => element.children)
      // const groupParentName = groups.find(
      //   (element) => Number(element.id.replace('groupParentId', '')) === groupParentId
      // ).label
      // const groupName = groups
      //   .flatMap((element) => element.children)
      //   .find((element) => Number(element.id.replace('groupId', '')) === groupId).label
      this.$router.push({
        path: '/approval/form',
        query: {
          status: 'EDIT',
          formId,
          groupId,
          groupName,
          groupParentId,
          groupParentName
        }
      })
    },
    goPreview({ formId, groupId, groupParentId,groupName,groupParentName }) {
      // const groups = this.data.flatMap((element) => element.children)
      // const groupParentName = groups.find(
      //   (element) => Number(element.id.replace('groupParentId', '')) === groupParentId
      // ).label
      // const groupName = groups
      //   .flatMap((element) => element.children)
      //   .find((element) => Number(element.id.replace('groupId', '')) === groupId).label
      this.$router.push({
        path: '/approval/form',
        query: {
          status: 'PREVIEW',
          formId,
          groupId,
          groupName,
          groupParentId,
          groupParentName
        }
      })
    },
    search() {
      this.form.pageNo = 1
      this.queryProcess()
    },
    async setDefault(params) {
      await updateDefault({
        data: {
          ...params
        },
        headers: {}
      })
      this.queryProcess()
    },
    handleSizeChange(value) {
      this.form.pageSize = value
      this.queryProcess()
    },
    handleCurrentChange(value) {
      this.form.pageNo = value
      this.queryProcess()
    }
  },

  async created() {
    const { userLoginDto } = await this.$store.dispatch('GetInfo', true)

    this.userLoginDto = { ...userLoginDto }
    this.queryProcess()
  },
  async mounted() {
    // const { data } = await findSealTypeList({})

    this.data = [
      {
        label: '流程分类',
        children: [
          {
            id: 'groupParentId2',
            label: '默认分组',
            children: [
              {
                id: 'groupId1',
                parentId: 'groupParentId2',
                parentName: '默认分组',
                label: '印章制作'
              },
              {
                id: 'groupId2',
                parentId: 'groupParentId2',
                parentName: '默认分组',
                label: '业务模版发起'
              }
            ]
          }
        ]
      }
    ]

  }
}
</script>
<style lang="less">
@import './styles/approval.less';
</style>
